<template>
  <div class="login">
    <div class="login_box">
      <!-- 登录头像 -->
      <div class="login_top">
        <img ref="pic" src="../../../public/LOG.png" alt="" />
      </div>
      <!-- 表单区域 -->

      <el-form :model="fromObj" :rules="loginRules" ref="fromRef" class="login_from">
        <h5>默认手机号13800000002 密码123456</h5>
        <el-form-item prop="mobile">
          <el-input
            v-model="fromObj.mobile"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="fromObj.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-unlock"
            type="password"
            @keyup.enter.native="login"
          ></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" :plain="true" @click="login">提交</el-button>
          <el-button type="danger" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { asyncRoutes } from '../../router/index'
export default {
  name: 'login',
  data() {
    return {
      fromObj: {
        mobile: '13800000002',
        password: '123456',
      },
      loginRules: {
        mobile: [
          // trigger 在鼠标失去焦点触发
          { required: true, message: '手机号不能为空白', trigger: 'blur' },
          {
            min: 3,
            max: 11,
            message: '长度在 3 到 11  个字符',
            trigger: 'blur',
          },
        ],
        password: [{ required: true, message: '密码不能为空白', trigger: 'blur' }],
      },
    }
  },
  methods: {
    ...mapActions('userStore', ['loginActions', 'getUserInfoActions']),
    reset() {
      // ElementUI  Form Methods
      this.$refs.fromRef.resetFields()
    },
    // 提交事件
    login() {
      //   validate传入两个参数 是否校验成功和未通过校验的字段
      this.$refs.fromRef.validate(async (vali) => {
        if (!vali) return
        // 通过post请求 将fromObj传给服务器
        // 通过解构赋值将结果的data解构赋值给res
        try {
          await this.loginActions(this.fromObj)
          this.$router.replace('/')
        } catch (err) {
          console.error(err)
        }
      })
    },
  },
  mounted() {
    // console.log(asyncRoutes)
  },
}
</script>

<style lang="less" scoped>
.login {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: #774345;
  .login_box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 35vw;
    height: 40vh;
    background-color: #fff;
    transform: translate(-50%, -60%);
    box-shadow: #f8ebe6 0px 0px 20px;
    .login_top {
      height: 50%;
      width: 32%;
      position: absolute;
      left: 50%;
      top: -20%;
      transform: translate(-50%, 0);
      border-radius: 50%;
      box-shadow: 0 0 10px rgb(202, 95, 95);
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .login_from {
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 100px;
    .btns {
      display: flex;
      justify-content: right;
    }
  }
}
</style>